<div id="ajax_content">
</div>
<div class="row-fluid sortable ui-sortable">
</div>
    <script>
    //init
    $(document).ready(function(){
       load_ajax_topic();
    });
    var add = 0;
    var page = 1;
    var newest_topic = '';
    var first_time = 1;
    var newest_topic_create_time = 0;
    var time = <?php echo REAL_TIME_REQUEST ?>;



    //function
    //real time
    function ajaxRealTimeFetchNewMessage() {
        //load_ajax_topic();
        // $('#ajax_content').empty();
        check_for_new_topic();
        tid = setTimeout(ajaxRealTimeFetchNewMessage, time); // repeat myself
    }
    var tid = setTimeout(ajaxRealTimeFetchNewMessage, time);

    function load_ajax_topic(){
        $.ajax({
            url: "<?php echo $this->url('admin/child',array('controller'=>'user','action'=>'friendtopic')) ?>",
            type: "get",
            data: {page: page}
        }).done(function(data){
                data = $.parseJSON(data);
                //find newest topic_id  date
                var date2 = new Date( data[0]['topic_create_date']);
                date2 = date2.getTime();


                if(date2 > newest_topic_create_time){
                    newest_topic_create_time = date2;
                    newest_topic = data[0]['topic_id'];
                }

                for(var i = 0; i < data.length; i++)
                {
                    console.log(data[i]);
                    var content = '<div class="row-fluid sortable ui-sortable">';
                    content = content +  '<div class="box span12">';
                    content = content +  '<div class="box-content">';
                    content = content +  '<div class="row-fluid ">';
                    content = content +  '<div class="span1">';
                    content = content +  '<a href="<?php echo $this->url('admin/child',array('controller'=>'user','action'=>'detail')) ?>/'+data[i]['user_id']+'"><img src="'+data[i]['user_avatar']+'" ></a>';
                    content = content +  '</div>';
                    content = content +  '<div class="span11">';

                    content = content +  '<a href="<?php echo $this->url('admin/child',array('controller'=>'topic','action'=>'detail')) ?>/'+data[i]['topic_id']+'"><h3>'+data[i]['topic_title']+'</h3></a>';
                    content = content +  '<a href="<?php echo $this->url('admin/child',array('controller'=>'user','action'=>'detail')) ?>/'+data[i]['user_id']+'"><h6>'+data[i]['user_name']+'</h6></a>';
                    content = content +  '<dt>'+data[i]['topic_desc']+'</dt>';
                    content = content +  '</div>';
                    content = content +  '</div>';
                    content = content +  '</div>';
                    content = content +  '</div>';
                    content = content +  '</div>';
                    $('#ajax_content').append(content);
                }
            });
    }
    //function check for new topic
    function check_for_new_topic(){
        $.ajax({
            url: "<?php echo $this->url('admin/child',array('controller'=>'user','action'=>'friendtopic')) ?>",
            type: "get",
            data: { newest : newest_topic,check: "1" }
        }).done(function(data){
             if(data == 1){
                if( $(window).scrollTop() /( $(document).height() - $(window).height()) == 0){
                     $('#ajax_content').empty();
                     page = 1;
                     load_ajax_topic();
                 }

             }
        })
    }

    //scroll to bottom
    $(window).on( 'scroll',function(eS){
        //scroll = 1 (at the bottom)
        //if at bottom load more topic
        if($(this).scrollTop() /( $(document).height() - $(this).height()) == 1){
            page = page + 1;
            load_ajax_topic();
        }
        else{


        }
    });
</script>
